<!--eslint-disable-->
<template>
	<div class="header">
		<div class="header-left">
			<span class="iconfont back-icon">&#xe624;</span>
		</div>
		<div class="header-input">
			<span class="iconfont">&#xe632;</span>
			输入城市景点主题
			</div>
			<router-link to='/city'>
				<div class="header-right">
					{{city}}
					<!-- 每个子组件都有$store -->
					<span class="iconfont arrow-icon">&#xe64a;</span>
				</div>
			</router-link>
		
	</div>
</template>
<script>
	import {mapState} from 'vuex'
	export default {
		name: 'HomeHeader',	
		computed:{
			...mapState(['city'])//只mapstate 把vuex的属性city 映射到city上面
			//...mapState({city:city'}) 同上
		}
	}
</script>
<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.header
		display:flex
		height: $headerHeight
		line-height:$headerHeight
		background:$bgColor
		color:#fff
		.header-left
			width: 0.64rem
			float: left
			.back-icon 
				text-aligin:center
				font-size:0.4rem
		.header-input
			flex: 1
			height:0.64rem
			line-height:0.64rem
			margin-top:0.12rem
			margin-left:0.2rem
			padding-left:0.2rem
			background:#fff
			border-radius:.1rem 
			color:#ccc
		.header-right
			min-width: 1.04rem
			padding:0 .1rem
			float: right
			text-align:center
			color:#fff
			.arrow-icon
				margin-left:-0.04rem
				font-size:.24rem
</style>